<template>
	<div class="content">
		<div style="margin-top: 15px; margin-left: 15px; margin-bottom: 20px;" @click="goback"><i
				class="el-icon-arrow-left" style="font-size: 24px;"></i></div>
		<div class="title top">
			<div class="item" style="font-size: 18px;">{{ examData.name }}考试</div>
		</div>
		<div class="title">
			<div class="item">考试总分:{{ examData.score }}分</div>
			<div class="item">考试时间:{{ examData.suggestTime }}分钟</div>
			<!-- <div class="item">剩余时间:{{ remainingTime() }}</div> -->
		</div>
		<!-- {{uni.getStorageSync('userInfo').id}} -->

		<div class="items top">
			<div v-for="(item,index) in examData.titleItems" :key="index">
				<div style="margin: 20rpx 0; margin-top: 40rpx;">{{ item.name  }}</div>
				<div v-for="(itemss,indexss) in item.questionItems" :key="indexss">
					<div style="margin: 20rpx 0;">
						<div style="margin-bottom: 20rpx;">{{ indexss + 1+'. '+ `(${itemss.score} 分)`  }}</div>
						<rich-text :preview="true" class="contentBox" :nodes="imgDeal(itemss.title)"
							v-if="itemss.title"></rich-text>
					</div>
					<div v-if="itemss.questionType == '1'||itemss.questionType == '3'">
						<u-radio-group v-model="itemss.content">
							<u-radio v-for="(items,indexs) in itemss.items" :key="indexs" :name="items.prefix"
								:label="items.prefix">{{ items.prefix +'. ' + items.content }}</u-radio>
						</u-radio-group>
					</div>
					<!-- <div v-if="item.TESTTYPE == 'TRUE_OR_FALSE'">
					<u-radio-group v-model="item.ANSWER">
						<u-radio name="true" label="true">{{ 'A. ' + item.OPTION_A }}</u-radio>
						<u-radio name="false" label="false">{{ 'B. ' + item.OPTION_B }}</u-radio>
					</u-radio-group>
					</div> -->
					<div v-if="itemss.questionType == '2'">
						<u-checkbox-group v-model="itemss.contentArray" @change="checkboxs($event,indexss)">
							<u-checkbox v-for="(items,indexs) in itemss.items" :key="indexs" :name="items.prefix"
								:label="items.prefix+'. '+items.content"></u-checkbox>
						</u-checkbox-group>
					</div>
				</div>
			</div>
			<div class="btns">
				<u-button type="primary" @click="tosumit">我要交卷</u-button>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		selectexamPaper,
		answerSubmit
	} from "@/api/home/index.js"
	export default {
		name: 'FrontExams',
		data() {
			return {
				examData: {



				},
				timer: null,
				endTime: 0,
				checkedArr: [],
				checked: false,
				times: '',
				examitem: {},
				SCORE: '',
				targetTime: '2024-06-26 17:00:00',
				formattedRemainingTime: '00分钟:00秒',
				timers: 0,
				eId: ''
			}
		},
		computed: {
			// remainingTime() {
			// 	// 获取剩余时间
			// 	let remaining = this.endTime - Date.now();
			// 	if (remaining <= 0) {
			// 		this.clearTimer();
			// 		return '00:00:00';
			// 	}

			// 	return this.formatTime(remaining);
			// }
		},
		onLoad(e) {
			this.eId = e.id
			this.getexam()

			// 设置倒计时结束时间为1小时后
			this.endTime = Date.now() + 1000 * 60 * 60;
			// this.startTimer()
		},
		methods: {
			imgDeal(str) {
				return str.replace(/\<img/gi, '<img style="width:100px;height:auto;display:block;"');
			},
			getexam() {
				var data = {
					id: uni.getStorageSync('paperId')
				}
				selectexamPaper(data).then((res) => {
					this.examData = res.response
					console.log(res, 'resssshjksand')
				})
			},
			checkboxs(e, index) {
				console.log(e, index, 'hasdijbasbaski')
			},
			startTimer() {
				var that = this
				this.timer = setInterval(() => {
					// 强制Vue重新计算computed属性
					// this.$forceUpdate();
					that.remainingTime()

					// this.totalSeconds -= 1;
				}, 1000);
			},
			remainingTime() {
				// 获取剩余时间
				let remaining = this.endTime - Date.now();
				if (remaining <= 0) {
					this.clearTimer();
					return '00:00:00';
				}
				console.log(this.formatTime(remaining), 'sdasad')
				this.timers = this.formatTime(remaining)
				return this.formatTime(remaining);
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			formatTime(time) {
				console.log(time, 'bsahjbasdjh')
				// 将剩余时间转换为HH:MM:SS格式
				let hours = Math.floor(time / (1000 * 60 * 60));
				let minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
				let seconds = Math.floor((time % (1000 * 60)) / 1000);
				console.log(this.padTime(hours) + ':' + this.padTime(minutes) + ':' + this.padTime(seconds))
				return this.padTime(hours) + ':' + this.padTime(minutes) + ':' + this.padTime(seconds);
			},
			padTime(time) {
				return time.toString().padStart(2, '0');
			},
			tosumit() {
				var that = this
				var data = {
					id:uni.getStorageSync('paperId'),
					answerItems: [],
					memberId: uni.getStorageSync('userInfo').id,
					doTime: 60
				}
				this.examData.titleItems.forEach((item, index) => {
					item.questionItems.forEach((items, indexs) => {
						var obj = {
							completed: true,
							content: items.content,
							contentArray: items.contentArray,
							itemOrder: items.itemOrder,
							questionId: items.id
						}
						data.answerItems.push(obj)
					})
				})
				answerSubmit(data).then((res) => {
					if (res.code == 1) {
						this.clearTimer();
						uni.showModal({
							title: '成绩',
							showCancel: false,
							content: `本次考试得分：${res.response}`,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: `/packageA/pages/mybaoming/mybaoming`
									})
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						})
					} else {
						uni.showToast({
							title: '请检查全部答题，是否答完',
							duration: 2000,
							icon: 'none'
						});
					}

					console.log(res, 'rsahjklasnd')
				})
			},
		}

	}
</script>
<style scoped>
	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.content {
		height: 100%;
		padding-bottom: 50px;
		padding-top: 30px;
		background-color: #fff;
		overflow-y: auto;
	}

	.title {
		font-size: 12px;
		box-sizing: border-box;
		padding: 20px 10px;
		display: flex;
		justify-content: center;
		background-color: #fff;
	}

	.item {
		padding: 0 10px;
	}

	.top {
		margin-top: 10px;
	}

	.items {
		margin: 0 auto;
		width: 90%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		box-shadow: -4px 4px 26px #c7c7c7;
		-moz-box-shadow: -4px 4px 26px #c7c7c7;
		-webkit-box-shadow: -4px 4px 26px #c7c7c7;
	}

	.examitem {
		margin-bottom: 20px;
	}

	.u-radio-group {
		display: flex;
		flex-direction: column;
	}

	.u-radio {
		margin-top: 20px;
	}

	.btns {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
	}
</style>